<ui:composition xmlns="http://www.w3.org/1999/xhtml"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:p="http://primefaces.org/ui"
	xmlns:pe="http://primefaces.org/ui/extensions"
	template="plantillas/disenio_comun.xhtml">

	<!-- This methods defined in head HTML tag -->
	<ui:define name="head">
	
		<!-- Stylesheets import. 
		<h:outputStylesheet name="home.css" library="css" />
		-->

	</ui:define>

	<ui:define name="contenido">
	
		<h:form id="FormularioRegistrarUsuario">
			<p:growl id="growl" showDetail="true" />
			<div>			
				<table border="0" cellpadding="5" cellspacing="0"  bgcolor="#EEEEEE">
					
					<tr>				 
				    	<td colspan="4" align="center">
				    		<h2 align="center"><h:outputText value="Actulizar Usuarios del Sistema"/></h2>
							<center>(Usuarios: Coordinadores, Formadores y Otros.)</center>
				    	</td>
					</tr>
					<p:messages  id="response" globalOnly="true" showDetail="true" autoUpdate="false" closable="true" />
										
				  	<tr>
				  		<td colspan="2" style="vertical-align:text-top;">
				  				<p:panelGrid id="tablaDatosUsuario" columns="3" style="text-align:left;font-size: 90%"  >
				  						<f:facet name="header">  
										        Datos del Usuario 
										</f:facet>
																		
											<h:outputLabel for="nombreUsuario" value="Nombres:" />
							    			<p:inputText id="nombreUsuario" value="#{controladorUsuario.usuarioSelected.nombres}"  size="40" required="true" requiredMessage="Campo requerido."/>	
							    			<p:message for="nombreUsuario"  /> 
							    			
							    			<h:outputLabel for="apePatUsuario" value="Apellido Paterno:" />
							    			<p:inputText id="apePatUsuario" value="#{controladorUsuario.usuarioSelected.ape_pat}"  size="40" required="true" requiredMessage="Campo requerido."/>	
							    			<p:message for="apePatUsuario"  /> 
							    			
							    			<h:outputLabel for="apeMatUsuario" value="Apellido Materno:" />
							    			<p:inputText id="apeMatUsuario" value="#{controladorUsuario.usuarioSelected.ape_mat}" size="40" required="true" requiredMessage="Campo requerido."/>	
							    			<p:message for="apeMatUsuario"  /> 
							    			
							    			<h:outputLabel for="perfil" value="Perfil:" />
							    			<p:selectOneMenu id="perfil" value="#{controladorUsuario.usuarioSelected.id_perfil}" required="true" requiredMessage="Campo requerido.">
									            <f:selectItem itemLabel="- Selecciona -" itemValue="" />
									            <f:selectItem itemLabel="Funcionario Administrativo" itemValue="P02" />
									            <f:selectItem itemLabel="Funcionario Operativo" itemValue="P03" />
									        </p:selectOneMenu>	
							    			<p:message for="perfil"  /> 
							    			
							    			
							    			<h:outputLabel for="dniUsuario" value="DNI:" />
							    			<p:inputText id="dniUsuario" value="#{controladorUsuario.usuarioSelected.dni}"  size="20" required="true" 
							    				requiredMessage="Campo requerido." validatorMessage="8 caracteres." maxlength="8">
							    				<f:validateLength maximum="8"  minimum="8"/>
							    			</p:inputText>	
							    			<p:message for="dniUsuario"  /> 
							    			
							    			<h:outputLabel for="userUsuario" value="Usuario:" />
							    			<p:inputText id="userUsuario" value="#{controladorUsuario.usuarioSelected.usuario}"  size="20" required="true" requiredMessage="Campo requerido."/>	
							    			<p:message for="userUsuario"  /> 
							    			
							    			<h:outputLabel for="claveUsuario" value="Clave:" />
							    			<p:password id="claveUsuario"  value="#{controladorUsuario.usuarioSelected.clave}"  size="20" required="true" requiredMessage="Campo requerido."
							    			 feedback="true" weakLabel="Débil" goodLabel="Media" strongLabel="Fuerte"/>
                                    		<p:message for="claveUsuario" />
                                    		
                                    		<h:outputLabel for="cargoLaboral" value="Cargo Laboral:" />
							    			<p:selectOneMenu id="cargoLaboral" value="#{controladorUsuario.usuarioSelected.id_cargolaboral}" required="true" requiredMessage="Campo requerido.">
									            <f:selectItem itemLabel="- Selecciona -" itemValue="" />
									            <f:selectItem itemLabel="AUXILIAR DE EDUCACIÓN" itemValue="1" />
									            <f:selectItem itemLabel="COORDINADOR(A)" itemValue="2" />
									            <f:selectItem itemLabel="DOCENTE DE AULA DE INNOVACIÓN" itemValue="3" />
									            <f:selectItem itemLabel="DOCENTE DE APOYO TECNOLÓGICO" itemValue="4" />
									            <f:selectItem itemLabel="DOCENTE DE AULA" itemValue="5" />
									            <f:selectItem itemLabel="DOCENTE FORMADOR" itemValue="6" />
									            <f:selectItem itemLabel="DOCENTE POR HORAS" itemValue="7" />
									            <f:selectItem itemLabel="DIRECTOR(A)" itemValue="8" />
									            <f:selectItem itemLabel="ESPECIALISTA DE TECNOLOG. EDUC" itemValue="9" />
									            <f:selectItem itemLabel="JEFE DE AREA" itemValue="10" />
									            <f:selectItem itemLabel="SUB DIRECTOR(A)" itemValue="11" />
									            <f:selectItem itemLabel="TUTOR(A)" itemValue="12" />
									            <f:selectItem itemLabel="ESPECIALISTA DE PRIMARIA" itemValue="13" />
									            <f:selectItem itemLabel="ESPECIALISTA DE SECUNDARIA" itemValue="14" />
									            <f:selectItem itemLabel="ESPECIALISTA DE SISTEMAS DE INFORMACIÓN" itemValue="15" />
									        </p:selectOneMenu>	
							    			<p:message for="cargoLaboral"  /> 
                                    		
                                    		<h:outputLabel for="email" value="Email:" />
							    			<p:inputText id="email" value="#{controladorUsuario.usuarioSelected.email}" size="40" validatorMessage="Email inválido.">
							    				<f:validateRegex pattern="^[_A-Za-z0-9-\+]+(\.[_A-Za-z0-9-]+)*@[A-Za-z0-9-]+(\.[A-Za-z0-9]+)*(\.[A-Za-z]{2,})$" />
							    			</p:inputText>	
							    			<p:message for="email"  /> 
                                    		
                                    		<f:facet name="footer">
								            	<p:commandButton  
								            	update=":FormularioRegistrarUsuario,:FormularioRegistrarUsuario:tablaUsuarios, :FormularioRegistrarUsuario:tablaDatosUsuario" 
								            	value="Guardar" icon="ui-icon-check"   actionListener="#{controladorUsuario.registrarUsuario}" title="Registrar datos de usuario."/>
								            	<h:outputText value=" "/>
								            	<p:commandButton  update=":FormularioRegistrarUsuario:tablaDatosUsuario" actionListener="#{controladorUsuario.resetForm}"
								            		value="Limpiar" icon="ui-icon-refresh"  title="Registrar datos de usuario."  process="@this" />
								            	<h:outputText value=" "/>  							
			    							</f:facet> 
                                    		
				  				</p:panelGrid>
				  								  		
	    			
						</td>
						
				    	<td colspan="2" align="center" style="vertical-align:text-top;">		
				    		
				        				<p:dataTable id="tablaUsuarios" var="usuario" 
									    		value="#{controladorUsuario.usuarios}"						    		
									    		paginator="true" rows="10"  
			                					paginatorTemplate="{FirstPageLink} {PageLinks} {LastPageLink}"
			                					widgetVar="tablaUsuario"   
									            emptyMessage="Ningún usuario se encontro con con el criterio dado"
									            tableStyle="width:700px;font-size: 90%" >  
									  		
									  			<f:facet name="header">
									  			Usuarios Disponibles
													<p:outputPanel style="text-align: right;">
												   		<h:outputText value="Search all fields:" />
														<h:inputText id="globalFilter" onkeyup="PF('tablaUsuario').filter()" />
													</p:outputPanel>
												</f:facet>		
									 
										    
										     <p:column id="columnaNombreUsuario" filterBy="#{usuario.nombres}"   
									        		sortBy="#{usuario.nombres}"
									                headerText="Nombre" filterMatchMode="contains" style="text-align:left">						             
									            <h:outputText value="#{usuario.nombres}" />
									            <p:watermark forElement="FormularioRegistrarUsuario:tablaUsuarios:columnaNombreUsuario" value="Buscar..." />  
									        </p:column> 
									        
									        <p:column id="columnaApePaterno" filterBy="#{usuario.ape_pat}"   
									        		sortBy="#{usuario.ape_pat}"
									                headerText="Apellido Paterno" filterMatchMode="contains" style="text-align:left">						             
									            <h:outputText value="#{usuario.ape_pat}" />
									            <p:watermark forElement="FormularioRegistrarUsuario:tablaUsuarios:columnaApePaterno" value="Buscar..." />  
									        </p:column> 
									         <p:column id="columnaApeMaterno" filterBy="#{usuario.ape_mat}"   
									        		sortBy="#{usuario.ape_mat}"
									                headerText="Apellido Materno" filterMatchMode="contains" style="text-align:left">						             
									            <h:outputText value="#{usuario.ape_mat}" />
									            <p:watermark forElement="FormularioRegistrarUsuario:tablaUsuarios:columnaApeMaterno" value="Buscar..." />  
									        </p:column> 
									        
									        <p:column id="columnaDni" filterBy="#{usuario.dni}"   
									        		sortBy="#{usuario.dni}"
									                headerText="DNI" filterMatchMode="contains" style="text-align:left">						             
									            <h:outputText value="#{usuario.dni}" />
									            <p:watermark forElement="FormularioRegistrarUsuario:tablaUsuarios:columnaDni" value="Buscar..." />  
									        </p:column> 
									        
									        <p:column headerText="" style="width:70px">  
									        
									          <p:commandButton id="seleccionar" update=":FormularioRegistrarUsuario" icon="ui-icon-pencil" 
								                 process="@this" style="font-size: 80%" title="Seleccionar el usuario">  
								                 	  <f:setPropertyActionListener value="#{usuario.id_usuario}" target="#{controladorUsuario.loadUsuario}" />
								                 </p:commandButton>
								                 
								                  <p:commandButton  icon="ui-icon-close" style="font-size: 80%" title="Eliminar el usuario"  
								                  	oncomplete="confimacion.show()"   process="@this"  >  
								                   		<f:setPropertyActionListener value="#{usuario.id_usuario}" target="#{controladorUsuario.usuarioSelected.id_usuario}" />
								                 </p:commandButton>
				
									        </p:column> 

									    </p:dataTable>
								
						</td>
						
				  	</tr>

				</table>
			</div>
			
			<pe:keyFilter for="dniUsuario" mask="num"/>  
			
			 <p:confirmDialog id="confirmationMessage" message="Está seguro de eliminar el usuario seleccionado.?"  
									                showEffect="bounce" hideEffect="explode"  
									                header="Confirmación de Usuario" severity="alert" widgetVar="confimacion">  
									                
					                			         
						<p:commandButton value="OK" id="eliminar" update=":FormularioRegistrarUsuario" 
							oncomplete="confimacion.hide()"	 process="@this" actionListener="#{controladorUsuario.eliminarUsuario}" />
							
						<p:commandButton value="Cancelar" onclick="confimacion.hide()" type="button" />   
									                  
			   </p:confirmDialog>  
			
			
    
		</h:form>
		
		

	</ui:define>
</ui:composition>